<template>
    <div class="bg-gray-50 min-h-[1024px]">
        <navigation></navigation>
        <div class="relative h-[200px] bg-primary overflow-hidden">
            <img :src="headerBgUrl" class="w-full h-full object-cover"/>
            <div class="absolute bottom-6 left-8 flex items-center gap-4">
                <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white">
                    <img :src="avatarUrl" class="w-full h-full object-cover"/>
                </div>
                <div class="text-white">
                    <div class="flex items-center gap-2">
                        <span class="text-lg font-medium">陈志远</span>
                        <el-icon><CircleCheckFilled /></el-icon>
                    </div>
                    <div class="text-sm opacity-90">人工智能 / 软件开发工程师</div>
                </div>
                <div class="update" @click="toUpdate()">
                    <span >修改</span>
                </div>
            </div>

        </div>

        <div class="max-w-[1440px] mx-auto px-8 py-6">
            <div class="grid grid-cols-2 gap-6">
                <div class="space-y-6">
                    <!-- 获奖证书 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">获奖证书</h2>
                                <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                            </div>
                        </template>
                        <div class="border rounded p-4">
                            <img :src="certificateUrl" class="w-[200px] mb-4"/>
                            <div class="space-y-2">
                                <div><span class="text-gray-500">比赛名称：</span>全国大学生人工智能创新大赛</div>
                                <div><span class="text-gray-500">获奖等级：</span>一等奖</div>
                                <div><span class="text-gray-500">颁发机构：</span>教育部高等教育司</div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 我的项目 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">我的项目</h2>
                                <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="project in projects" :key="project.name" class="border rounded p-4">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h3 class="font-medium mb-2">{{ project.name }}</h3>
                                        <p class="text-sm text-gray-600 mb-2">{{ project.description }}</p>
                                        <div class="flex gap-2">
                                            <el-tag v-for="tag in project.tags" :key="tag.name" :type="tag.type" size="small">
                                                {{ tag.name }}
                                            </el-tag>
                                        </div>
                                    </div>
                                    <div class="text-sm text-gray-500">{{ project.date }}</div>
                                </div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 集市能力 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">集市能力</h2>
                                <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="skill in marketSkills" :key="skill.name" class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <img :src="skill.icon" class="w-10 h-10 rounded"/>
                                    <div>
                                        <div class="font-medium">{{ skill.name }}</div>
                                        <div class="text-sm text-gray-500">{{ skill.description }}</div>
                                    </div>
                                </div>
                                <div class="text-sm text-primary">已接单 {{ skill.orders }} 次</div>
                            </div>
                        </div>
                    </el-card>
                </div>

                <div class="space-y-6">
                    <!-- 专业技能 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">专业技能</h2>
                                <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="skill in professionalSkills" :key="skill.name">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="font-medium">{{ skill.name }}</span>
                                    <span class="text-sm text-primary">{{ skill.level }}</span>
                                </div>
                                <el-progress :percentage="skill.percentage" :show-text="false" :stroke-width="8"/>
                            </div>
                        </div>
                    </el-card>

                    <!-- 通用技能 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">通用技能</h2>
                                <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                            </div>
                        </template>
                        <div class="flex items-center gap-2 text-green-500">
                            <el-icon><CircleCheckFilled /></el-icon>
                            <span>已认证</span>
                        </div>
                    </el-card>

                    <!-- 实习经历 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">实习经历</h2>
                                <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="experience in internships" :key="experience.company" class="border rounded p-4">
                                <div class="flex items-start gap-3">
                                    <img :src="experience.logo" class="w-12 h-12 rounded"/>
                                    <div class="flex-1">
                                        <div class="flex justify-between items-start">
                                            <div>
                                                <h3 class="font-medium">{{ experience.company }}</h3>
                                                <p class="text-sm text-gray-600">{{ experience.position }}</p>
                                            </div>
                                            <div class="text-sm text-gray-500">{{ experience.date }}</div>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">{{ experience.description }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 我的活动 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">我的活动</h2>
                                <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="activity in activities" :key="activity.name" class="border rounded p-4">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <h3 class="font-medium mb-2">{{ activity.name }}</h3>
                                        <p class="text-sm text-gray-600 mb-2">{{ activity.description }}</p>
                                        <div class="flex items-center gap-2 text-sm text-gray-500">
                                            <el-icon><Location /></el-icon>
                                            <span>{{ activity.location }}</span>
                                        </div>
                                    </div>
                                    <div class="text-sm text-gray-500">{{ activity.date }}</div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { CircleCheckFilled, Location } from '@element-plus/icons-vue';
    import navigation from "../../views/navigation.vue"
    const headerBgUrl = 'https://ai-public.mastergo.com/ai/img_res/a5b398bd4cbe9e7e4e4c8693177f25ed.jpg';
    const avatarUrl = 'https://ai-public.mastergo.com/ai/img_res/853f78ddce42d62aa122baa67d169680.jpg';
    const certificateUrl = 'https://ai-public.mastergo.com/ai/img_res/ae73b55ce9c00277f3d86171b05f45e8.jpg';
    import {useRouter,useRoute} from "vue-router";
    const router=useRouter()
    const projects = ref([
        {
            name: '智能图像识别系统',
            description: '基于深度学习的多场景图像识别系统，支持物体检测、人脸识别等多种功能',
            tags: [
                { name: 'Python', type: 'primary' },
                { name: 'TensorFlow', type: 'success' },
                { name: 'OpenCV', type: 'warning' }
            ],
            date: '2023.09 - 2024.01'
        },
        {
            name: '智慧校园管理平台',
            description: '集成学生信息管理、课程安排、考勤系统等功能的综合管理平台',
            tags: [
                { name: 'Vue.js', type: 'warning' },
                { name: 'Node.js', type: 'danger' },
                { name: 'MySQL', type: 'info' }
            ],
            date: '2023.03 - 2023.08'
        }
    ]);

    const marketSkills = ref([
        {
            name: 'AI 模型训练',
            description: '深度学习模型开发与优化',
            icon: 'https://ai-public.mastergo.com/ai/img_res/55ca105f5c07b5cccb3a888cdc8bcc8e.jpg',
            orders: 12
        },
        {
            name: '全栈开发',
            description: 'Web 应用开发与部署',
            icon: 'https://ai-public.mastergo.com/ai/img_res/9e891c350098c83518ca4340b6a0a537.jpg',
            orders: 8
        }
    ]);

    const professionalSkills = ref([
        { name: '深度学习', level: '专家级', percentage: 90 },
        { name: 'Python 开发', level: '高级', percentage: 85 },
        { name: '前端开发', level: '中级', percentage: 75 }
    ]);

    const internships = ref([
        {
            company: '腾讯科技',
            position: 'AI 研究部 - 算法工程师',
            date: '2023.07 - 2023.09',
            description: '负责计算机视觉相关算法研究与开发，参与多个实际项目的落地实施',
            logo: 'https://ai-public.mastergo.com/ai/img_res/aaeaf381598e681015178a6a154a63a4.jpg'
        },
        {
            company: '字节跳动',
            position: '技术部 - 后端开发实习生',
            date: '2023.03 - 2023.06',
            description: '参与核心业务系统开发，负责接口开发与性能优化工作',
            logo: 'https://ai-public.mastergo.com/ai/img_res/b4c6ad8f42649f9a750c4c0e9ca560f9.jpg'
        }
    ]);

    const activities = ref([
        {
            name: '2024 全球人工智能技术大会',
            description: '作为特邀嘉宾分享深度学习在计算机视觉领域的最新应用',
            location: '北京国际会议中心',
            date: '2024.03.15'
        },
        {
            name: '开源技术沙龙',
            description: '分享个人在开源项目中的经验与心得，促进技术交流',
            location: '深圳南山区科技园',
            date: '2024.02.20'
        }
    ]);
    function toUpdate() {
        console.log(111)
        router.push('/modifiedinformation')
    }

</script>

<style scoped>
    :deep(.el-card__body) {
        padding: 16px;
    }

    :deep(.el-progress-bar__outer) {
        border-radius: 9999px;
        background-color: #f3f4f6;
    }

    :deep(.el-progress-bar__inner) {
        border-radius: 9999px;
        background-color: #4A90E2;
    }
    .update{
        color: white;
        margin-top: 4vh;
    }
</style>4